// #region    导航1
const nav1_icons = document.querySelectorAll("ul.nav1>li>a>.icon");
const nav1_labels = ["景点·玩乐", "周边游", "美食林", "一日游", "当地攻略"];
function get_nextsibling(n) {
  var x = n.nextSibling;
  while (x.nodeType != 1) {
    x = x.nextSibling;
  }
  return x;
}
nav1_icons.forEach((e, i) => {
  // 设置图标
  e.style.backgroundPositionY = `${-32 * i}px`;
  // 设置文字
  const next = get_nextsibling(e);
  next.innerHTML = nav1_labels[i];
  e.parentNode.title = nav1_labels[i];
});
// #endregion 导航1
// #region    导航2
const nav2_type_data = [
  {
    cname: "酒店",
    subtype: ["海外酒店", "特价酒店", "团购", "民宿·客栈"],
  },
  {
    cname: "机票",
    subtype: ["火车票", "特价机票", "汽车票·船票", "专车·租车"],
  },
  {
    cname: "旅游",
    subtype: ["门票", "目的地攻略", "邮轮履行", "定制履行"],
  },
];
const nav2 = document.querySelector(".nav2");
for (let i = 0; i < nav2_type_data.length; i++) {
  const e = nav2_type_data[i];
  const type_html = document.createElement("div");
  type_html.innerHTML = `
    <div class="name">
      <a href="">${e.cname}</a>
    </div>
    <div class="subtype">
      <a href="">${e.subtype[0]}</a>
      <a href="">${e.subtype[1]}</a>
    </div>
    <div class="subtype">
      <a href="">${e.subtype[2]}</a>
      <a href="">${e.subtype[3]}</a>
    </div>
  `;
  nav2.append(type_html);
}
// #endregion 导航2
// #region    导航3
const nav3_data = [
  "Wifi电话卡",
  "保险·签证",
  "外币兑换",
  "购物",
  "当地向导",
  "自由行",
  "境外玩乐",
  "礼品卡",
  "信用卡",
  "更多",
];
const nav3 = document.querySelector(".nav3");
console.log(nav3);
for (let i = 0; i < nav3_data.length; i++) {
  const e = nav3_data[i];

  const item = document.createElement("li");
  item.innerHTML = `
    <a href="#">
      <span class="icon"></span>
      <span class="label">${e}</span>
    </a>
  `;
  const icon = item.firstElementChild.firstElementChild;
  console.log(item.firstElementChild.firstElementChild);
  icon.style.backgroundPositionY = `${-27.3 * i}px`;
  nav3.append(item);
}
// #endregion 导航3
// #region    热门
const sales_bd = document.querySelector(".sales_bd");
console.log(sales_bd);
const img_data = [
  "./upload/pic1.jpg",
  "./upload/pic2.jpg",
  "./upload/pic3.jpg",
  "./upload/pic4.jpg",
  "./upload/pic5.jpg",
  "./upload/pic6.jpg",
];
for (let i = 0; i < img_data.length; i++) {
  const e = img_data[i];
  const li = document.createElement("li");
  const img_html = `
    <a href="#">
      <img src="${img_data[i]}" alt="pic${i}" />
    </a>
  `;
  li.innerHTML = img_html;
  sales_bd.append(li);
}
// #endregion 热门
